<template>
  <div>
    <city-header></city-header>
    <city-search :allCity="allCity"></city-search>
    <city-list
      :hotCity="hotCity"
      :allCity="allCity"
      :targetText="targetText"
    ></city-list>
    <city-alphabet
      :alphabetList="allCity"
      @clicked="gitTargetText"
    ></city-alphabet>
  </div>
</template>

<script>
  import cityHeader from './components/Header'
  import citySearch from './components/Search'
  import cityList from './components/List'
  import cityAlphabet from './components/Alphabet'
  import axios from 'axios'

  export default {
    name: '',
    data (){
      return {
        hotCity: [],
        allCity: {},
        targetText: ''
      }
    },
    components: {
      cityHeader,
      citySearch,
      cityList,
      cityAlphabet

    },
    mounted(){
      this.getCityInfo()
    },
    methods: {
      getCityInfo (){
        axios.get('/api/city.json').then((res) => {
          const cityData = res.data.data
          if (res.data.ret && cityData) {
            this.hotCity = cityData.hotCities
            this.allCity = cityData.cities
          }
        })
      },
      gitTargetText (value){
        this.targetText = value
      }
    }
  }
</script>

<style lang="stylus" scoped></style>
